import { createDBFn } from '@/utils/decorate'

export const useFixedTable = () => {
  const maxHeight = ref('1000000000000px')
  const updateScrollTop = (e) => {
    // const scrollTop =
    //   window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 兼容多个浏览器
    /**
     * el-card__body-125+padding20++el-card-mb15 160px
     * 看了下改变大中小body的情况下 只有 el-card__body-height会改变-看看这个是否能够具有唯一性特征-开启这个滚动高度是否可以具备
     */

    // let pageHeight = 0
    // const pageDom = document.querySelector('el-pagination')
    // if (pageDom) {
    //   pageHeight = pageDom.getBoundingClientRect().height
    // }
    // const footerHeight = document.querySelector('.v-footer')!.getBoundingClientRect().height
    // const tableOptionsHeight = document
    //   .querySelector('#table-options')!
    //   .getBoundingClientRect().height

    const searchmb = 15
    const searchPad = 20
    const searchHeight = document.querySelector('.el-card__body')!.getBoundingClientRect().height // 125
    const scrollPostion = searchmb + searchPad + searchHeight
    const scrollTop = e.target.scrollTop

    // var(--top-tool-height)50 - var(--tags-view-height)35
    // const scrollTopDelta = 85
    // 单层searchHeight75 双层一般125
    const middleHeight = 125 - searchHeight + searchHeight

    if (scrollTop >= scrollPostion) {
      /**
       * 底部可能有合计total栏-这里大概计算出合理高度即可
       *  tabs30+header50 page- 24-32会变(调节大小的时候) 32+15*2margin search searchmb 125+15 + 底部footer
      tabs30+header50+searchHeight+      剔除searchmb15+ tablePad20    (+pageHeight+2margin15 这部分拿掉了)
       */
      // const deltaHeight = 30+50+pageHeight+15*2 +15 + searchHeight

      // 综合实践这个高度比较合理
      const deltaHeight = 30 + 50 + middleHeight
      const targetHeight = window.innerHeight - deltaHeight
      maxHeight.value = targetHeight + 'px'
      // maxHeight.value = `calc(100vh - ${deltaHeight}px)`
    }
  }

  const updateScrollTopDB = createDBFn(updateScrollTop, 100)

  return {
    maxHeight,
    updateScrollTopDB
  }
}
